<template>
  <div class="container">
    <swiper
        ref="mySwiper"
        :options="SwiperOptions"
        v-if="swiperList.length>0"
    >
      <swiper-slide v-for="(item,index) in swiperList" :key="index">
        <iframe :src="item" frameborder="0"></iframe>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
  </div>
</template>

<script>
export default {
name: "slide",
data(){
  return{
    SwiperOptions:{
      slidesPerView: 1,
      centeredSlides: true,
      observer:true,
      observeParents:true,
      loop:true,
      pagination: {
        el: '.swiper-pagination'
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    },
    swiperList:[]
  }
},
comments:{
},
mounted() {
  this.swiperList = window.parent.zsdurls;
}
}
</script>

<style scoped lang="less">
.container{
  width: 100%;
  height: 100%;
  position: relative;
.swiper-container{
  width: 100%;
  height: 100%;
  .swiper-wrapper{
    width: 100%;
    height:95%;
  }
  .swiper-slide{
    width: 100%;
    height:100%;
    iframe{
      width: 100%;
      height: 100%;
    }
  }
  }
}
.swiper-button-next {
  background-image: url("../assets/img/left.png");
}
.swiper-button-prev{
  background-image: url("../assets/img/right.png");
}
</style>